Pré-requisitos: Documentação de Especificação
Visão geral da interação do usuário pelas telas do sistema e protótipo interativo das telas com as funcionalidades que fazem parte do sistema (wireframes).
Apresente as principais interfaces da plataforma. Discuta como ela foi elaborada de forma a atender os requisitos funcionais, não funcionais e histórias de usuário abordados nas Documentação de Especificação.
O diagrama apresenta o estudo do fluxo de interação do usuário com o sistema interativo e muitas vezes sem a necessidade do desenho do design das telas da interface. Isso permite que o design das interações seja bem planejado e gere impacto na qualidade no design do wireframe interativo que será desenvolvido logo em seguida.
O diagrama de fluxo pode ser desenvolvido com “boxes” que possuem internamente a indicação dos principais elementos de interface - tais como menus e acessos - e funcionalidades, tais como editar, pesquisar, filtrar, configurar - e a conexão entre esses boxes a partir do processo de interação. Você pode ver mais explicações e exemplos https://www.lucidchart.com/blog/how-to-make-a-user-flow-diagram.
As referências abaixo irão auxiliá-lo na geração do artefato “Diagramas de Fluxo”.
Links Úteis:
Os wireframes são protótipos utilizados no design de interfaces para representar a estrutura de um site e o relacionamento entre suas páginas. Eles funcionam como ilustrações do layout e da disposição dos elementos essenciais da interface.
Nesta seção, é FUNDAMENTAL indicar, para CADA tela/wireframe proposto, QUAIS REQUISITOS estão sendo contemplados por ela.
Links Úteis:
- Protótipos vs Wireframes
- Ferramentas de Wireframes
- MarvelApp
- Figma
- Adobe XD
- Axure (Licença Educacional)
- InvisionApp (Licença Educacional)